<!doctype html>
<html>
<head>
    <title>rabbit.js and Socket.IO publish/subscribe example</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/moment-with-langs.min.js"></script>
</head>
<body>

<script>
    function message(obj) {
        var el = document.createElement('p');
        el.innerHTML = '<em>' + esc(obj) + '</em>'
        document.getElementById('chat').appendChild(el);
        document.getElementById('chat').scrollTop = 1000000;
    }
    var uid = "u_3819c633d6bf11e3a2eff0def181b3c9";
    var gid = "g_55a1d0e1f06811e3becc1df6a65ebdaf";
    var tid = "u_39c246c9d6bf11e3a2eff0def181b3c9";

    var connected = false;
    var conn;

    function connect() {
        console.log("http://" + document.location.host);
        conn = io.connect("http://" + document.location.host, {
            'connect timeout': 2000,
            'reconnect': true,
            'reconnection delay': 500,
            'reopen delay': 500,
            'max reconnection attempts': 10,
            'transports': [//'jsonp-polling'
                'websocket'
                //, 'flashsocket'
                //, 'htmlfile'
                //, 'xhr-polling'
                //, 'jsonp-polling'
            ]
        });

        conn.on("connect", function() {
            message("page connect");
            init();
            connected = true;
        })

        conn.on("disconnect", function() {
            message("page disconnect");
            connected = false;
        })

        conn.on("iwant.connect", function(_obj) {
            message("iwant.connect: " + _obj.success);
        })

        conn.on("iwant.message", function(_obj) {
            message("iwant.message: " + _obj.msg);
        })

        conn.on('message', function (obj) {
            //message(obj);
        });

        conn.on('error', function() {
            console.log("error: " + JSON.stringify(arguments));
            connected = false;
        });
    }

    function disconnect() {
        console.log("close conn." + conn);
        //conn.close();
    }

    function init() {
        uid = document.getElementById('uid').value || uid;
        //alert(uid);
        conn.emit("iwant.connect", {
            uid: uid
        });
    }

    function send() {
        tid = document.getElementById('tid').value || tid;
        var val = document.getElementById('text').value;
        var msg = {
            uid: uid,
            tid: tid,
            gid: gid,
            msg: val,
            timestamp: moment().format(config.datetimeFormat)
        };
        conn.emit("iwant.message", msg);
    }

    function esc(msg) {
        return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

</script>

<div id="chat"></div>
<p>uid:<input type="text" id="uid" value=""/></p>
<p>tid:<input type="text" id="tid" value=""/></p>
<p>tid:<input type="text" id="gid" value=""/></p>
<p>msg:<input type="text" id="text">
<input type="button" value="Send" onclick="send();"></p>
<input type="button" value="Connect" onclick="connect();">
<input type="button" value="Init" onclick="init();">
<input type="button" value="Disconnect" onclick="disconnect();">
<style>
    #chat {
        height: 200px;
        overflow: auto;
        width: 400px;
        border: 1px solid #eee;
        font: 13px Helvetica, Arial;
    }

    #chat p {
        padding: 8px;
        margin: 0;
    }

    #chat p:nth-child(odd) {
        background: #F6F6F6;
    }

    #form {
        width: 380px;
        background: #333;
        padding: 5px 10px;
    }

    #form input[type=text] {
        width: 300px;
        padding: 5px;
        background: #fff;
        border: 1px solid #fff;
    }

    #form input[type=submit] {
        cursor: pointer;
        background: #999;
        border: none;
        padding: 6px 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        margin-left: 5px;
        text-shadow: 0 1px 0 #fff;
    }

    #form input[type=submit]:hover {
        background: #A2A2A2;
    }

    #form input[type=submit]:active {
        position: relative;
        top: 2px;
    }
</style>

</body>
</html>
